<!-- 下拉框 包含树状 图标选择 -->
<template>
    <template v-if="props.icon">
        <tiny-popover trigger="click" :visible-arrow="false" :width="600" :height="600" v-model="data.visible" >
          <div class="tintPopover">
            <template v-for="(value, key) in categorys">
              <template v-for="(items, key) in value">
                <div>{{ key }}</div>
                <ul class="auto-wrap-list">
                  <template v-for="(item,index) in items">
                    <li class="vo_icon" @click="checkedIcon(item.name)">
                        <tiny-tooltip placement="bottom" effect="light">
                          <template #content> {{ item.nameCn }}</template>
                          <i :class="iconsClass(item)" style="font-size:24px;color:#40d322;"></i>
                        </tiny-tooltip>
                      </li>
                  </template>
                </ul>
              </template>
          
            </template>
          </div>
            <template #reference>
              <tiny-input v-model="data.icon" @click="focus" style="width: 180px;" >
                <template #prefix>
                  <i :class="iconshow()" ></i>
                </template>
              </tiny-input>
        </template> 
 
      </tiny-popover> 
    </template>
    <template v-else-if="props.tree">
        bb
    </template>
    <template v-else>
cc
    </template>

</template>

<script setup>
    import  {categorys} from "@opentiny/icons/categorys";//默认图标库
    import "@opentiny/icons/style/all.css";//默认图标库样式
    import { toRef, reactive, computed, onMounted, getCurrentInstance, watch } from 'vue';
    import { Select as TinySelect, Option as TinyOption, Popover as TinyPopover, TinyTreeSelect } from '@opentiny/vue';
    import vo from '@/pub/vo-select.js';
    import axios from 'axios'
    let {proxy} = getCurrentInstance();
    // 组件数据
    const data = reactive({
      
    })
    // 组件参数
    const props = defineProps({
        //值
        value: {type: Object, default: ''},
        //图标
        icon: {type: Boolean, default: false},
        //下拉
        select: {type: Boolean, default: false},
        //树状下拉
        tree: {type: Boolean, default: false},
        
    })
 // 对 categorys 的 key 进行排序
        const sortedCategoryKeys = computed(() => {
      return Object.keys(categorys).sort();
    });
      // 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
  const chanValue = computed({
    get: () => props.value,
    set: value => {
      emits('update:value', value);
    },
  });
  const emits = defineEmits(['update:value']);
    //显示图标
  const checkedIcon =(icon) =>{
    data.icon = icon;
    data.visible = false; 
  }
  //显示图标
  const iconshow =() =>{
    return "ci-"+data.icon;
  }
  const iconsClass = (item) =>{
    return "ci-"+item.name;
  }

</script>


<style lang="scss" scoped>
.auto-wrap-list {
    overflow: hidden;
    list-style: none;
   
    border-top: 1px solid var(--tv-base-color-success-3);
    border-left: 1px solid var(--tv-base-color-success-3);
    border-radius: 4px;
    display: grid;

    grid-template-columns: repeat(10, 1fr);

    .vo_icon{
    padding: 10px;
    cursor: pointer;
    border-right: 1px solid var(--tv-base-color-success-3);
    border-bottom: 1px solid var(--tv-base-color-success-3);
    text-align: center;
    }
  }
  .tintPopover{
    height: 580px;
    width: 560px;


  overflow-y: auto;
  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;  /* IE 和 Edge */
  scrollbar-width: none;  /* Firefox */
}
</style>